<template>
    <div>
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
            :size="'default'"
            status-icon
            :inline="true"
            class="demo-form-inline"
        >
            <el-form-item label="协议" prop="protocol_cod">
                <el-select
                    v-model="formData.protocol_cod"
                    placeholder="请选择"
                    :clearable="true"
                >
                    <el-option
                        v-for="optValue in protocols"
                        :key="optValue.value"
                        :label="optValue.label"
                        :value="optValue.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="费目" prop="fee_cod">
                <el-select
                    v-model="formData.fee_cod"
                    placeholder="请选择"
                    :clearable="true"
                    @change="getMods"
                >
                    <el-option
                        v-for="optValue in feecod"
                        :key="optValue.value"
                        :label="optValue.label"
                        :value="optValue.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="模式" prop="mod_cod">
                <el-select
                    v-model="formData.mod_cod"
                    placeholder="请选择"
                    :clearable="true"
                >
                    <el-option
                        v-for="optValue in mods"
                        :key="optValue.value"
                        :label="optValue.label"
                        :value="optValue.value"
                    />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <el-table
            ref="tableRef"
            :data="tableData"
            v-bind="tableDefaultAttribute"
            row-key="id"
            :max-height="tableHeight"
            table-layout="auto"
            @row-dblclick="update"
        >
            <template #empty>
                <span>无数据</span>
            </template>
            <el-table-column type="selection" width="55" :align="'center'" />
            <template v-for="col in tableColumns" :key="col.prop">
                <el-table-column
                    v-if="!col.isHidden"
                    :align="col.align"
                    :prop="col.prop"
                    :label="col.label"
                    :fixed="col.fixed"
                    :formatter="col.formatter"
                    :type="col.type"
                    :width="col.width"
                >
                   
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>
<script setup lang="ts" name="ProtocolRate">
import { FormInstance, FormRules, TableInstance } from 'element-plus';
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { useFeeStore } from '@/store/fee';
import { useAppStore } from '@/store/app';
import { Request } from '@/app/request';
import { SelectOption, TableColumn } from '@/common/types/app';
import { isEmpty } from 'lodash';
import { FeeEleModel, ProtocolRateModel } from '@/common/types/business';
import {
    tableDefaultAttribute,
    tableColumnDefault,
} from '@/hooks/useTable';
import { initObjectProperty } from '@/common/tools';
const formRef = ref<FormInstance>();
const tableRef = ref<TableInstance>();
const tableData = ref<Array<ProtocolRateModel>>([]);

const { protocols } = useFeeStore();
const { feecod } = useAppStore();
const mods = ref<SelectOption[]>([]);
const eles = ref<FeeEleModel[]>([]);
const tableHeight = ref(100);
const paramData = reactive<ProtocolRateModel>({});
const dialogUpdateVisible = ref(false);

type ProtocolRate = {
    protocol_cod?: string;
    fee_cod?: string;
    mod_cod?: string;
};
const formData = reactive<ProtocolRate>({
    protocol_cod: '',
    fee_cod: '',
    mod_cod: '',
});
const rules = reactive<FormRules>({
    protocol_cod: [{ required: true, message: '请选择协议', trigger: 'blur' }],
    fee_cod: [{ required: true, message: '请选择费目', trigger: 'blur' }],
    mod_cod: [{ required: true, message: '请选择模式', trigger: 'blur' }],
});
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'fee_rat',
        label: '费率',
        fixed: 'left',
        formFieldItemType: 'input',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'fee_ele1',
        label: '',
        formFieldItemType: 'input',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 20,
        prop: 'remark',
        label: '备注',
        width: 300,
    },
]);

const getMods = async (v: any) => {
    const req = new Request('取费目下模式', {
        fee_cod: v,
    });
    const r = await req.post();
    mods.value.length = 0;
    formData.mod_cod = undefined;
    if (!isEmpty(r.obj)) {
        mods.value = r.obj;
    }
};
const getEles = async (v: any) => {
    const req = new Request('取模式下元素', {
        mod_cod: v,
    });
    const r = await req.post();
    eles.value.length = 0;
    if (!isEmpty(r.obj)) {
        eles.value = r.obj;
    }
};
const refreshTableColumn = () => {
    tableColumns.length = 0;
    for (let index = 0; index < 10; index++) {
        if (index >= eles.value.length) {
            null;
        }
        const element = eles.value[index];
        tableColumns.push({
            ...tableColumnDefault,
            order: index+1,
            prop: `fee_ele${index+1}`,

        });
    }
}
const onRefresh = async () => {};
const add = () => {
    initObjectProperty(paramData);
    dialogUpdateVisible.value = true;
};
const update = (row: any) => {
    Object.assign(paramData, row);
    dialogUpdateVisible.value = true;
};
</script>
<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
